<template>
    <div class="">
        <div class="ibox ">
            <div class="ibox-title">
                <h5>{{title}}</h5>
            </div>
            <div class="ibox-content" style="height: 269px">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="flot-chart">
                            <div class="flot-chart-content" :id="div_id"></div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>
<script>
export default {
    name: "FlotChart",
    props: {
        id: String,
        title: String,
        data: [Object, Array],
        options: [Object, Array],
    },
    data() {
        return {
            div_id: this.id,
        }
    },
    watch: {
        id: function() {
            console.log('table id changed');
        },
        options: function() {
            console.log('table options changed');
        },
        "data.dataset1.data": {
            handler: function() {
                console.log(this. title+' flot data dataset1 data has changed');
                this.render_flot(this.div_id, this.data, this.options);
            },
            deep: true
        }
    },
    methods: {
        render_flot: function(id, datasets, options) {
            /* eslint-disable */
            var dataset = this.datasets_handler(datasets);
            // console.log(dataset);
            var options = options;
            // var previousPoint = null, previousLabel = null;
            $.plot($('#' + id), dataset, options);
        },
        datasets_handler: function(datasets) {
            var list = []
            for (const key in datasets) {
                const element = datasets[key];
                list.push(element);
            }
            return list
        }
    },
    mounted: function() {
        // this.render_flot(this.table_id, this.table_data, this.table_options);
    }
}
</script>

<style lang="scss" scoped>
    @import '../../assets/common/common.scss'
</style>
